<template>
    <div class="about-container">
        <div class="grid-container">
            <!-- 我的账号卡片 -->
            <div class="card account-card">
                <div class="card-header">
                    <h3>我的账号</h3>
                    <el-button type="text" class="header-link" @click="goToInformation">
                        <el-icon><arrow-right /></el-icon>
                    </el-button>
                </div>
                <div class="card-content">
                    <div class="user-profile">
                        <el-avatar :size="64" :src="avatarUrl" />
                        <div class="user-info">
                            <div class="info-row">
                                <span class="label">昵称：</span>
                                <span class="value">{{ userInfo?.name || '未设置' }}</span>
                            </div>
                            <div class="info-row">
                                <span class="label">用户名：</span>
                                <span class="value">{{ userInfo?.username || '未设置' }}</span>
                            </div>
                        </div>
                    </div>
                    <el-button type="primary" class="manage-btn" @click="goToInformation">
                        管理账号
                    </el-button>
                </div>
            </div>

            <!-- 身体健康卡片 -->
            <div class="card health-card">
                <div class="card-header">
                    <h3>身体健康</h3>
                    <el-button type="text" class="header-link" @click="goToHealth">
                        <el-icon><arrow-right /></el-icon>
                    </el-button>
                </div>
                <div class="card-content">
                    <div class="health-stats">
                        <div class="stat-item">
                            <span class="stat-label">身高</span>
                            <span class="stat-value">{{ userInfo?.height || '--' }} cm</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">体重</span>
                            <span class="stat-value">{{ userInfo?.weight || '--' }} kg</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">BMI</span>
                            <span class="stat-value">{{ bmi }}</span>
                        </div>
                    </div>
                    <div class="health-status">
                        <span class="status-label">健康监测数据：</span>
                        <el-tag :type="healthStatusType" class="status-tag">
                            {{ healthStatus }}
                        </el-tag>
                    </div>
                </div>
            </div>

            <!-- 信息与公告卡片 -->
            <div class="card notice-card">
                <div class="card-header">
                    <h3>信息与公告</h3>
                </div>
                <div class="card-content empty-content">
                    <el-empty description="暂无公告" />
                </div>
            </div>

            <!-- 待办事务卡片 -->
            <div class="card todo-card">
                <div class="card-header">
                    <h3>待办事务</h3>
                </div>
                <div class="card-content empty-content">
                    <el-empty description="暂无事务" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { UserTypeService } from '@/api/user'

const router = useRouter()
const userStore = useUserStore()

const userInfo = computed(() => userStore.userInfo)
const avatarUrl = computed(() => userStore.avatarUrl)
const userType = ref(null)

// 计算BMI
const bmi = computed(() => {
    if (userInfo.value.bmi != null) {
        return userInfo.value.bmi
    }
    else {
        if (userInfo.value?.height && userInfo.value?.weight) {
            const heightInMeters = userInfo.value.height / 100
            return (userInfo.value.weight / (heightInMeters * heightInMeters)).toFixed(1)
        }
        return '--'
    }
    
})

// 获取用户类型
const getUserType = async () => {
    try {
        const result = await UserTypeService()
        if (result.code === 200) {
            userType.value = result.data
        }
    } catch (error) {
        console.error('获取用户类型失败:', error)
    }
}

// 健康状态
const healthStatus = computed(() => {
    return userType.value?.type || '异常'
})

// 健康状态类型
const healthStatusType = computed(() => {
    const typeId = userType.value?.id
    if (!typeId) return 'warning' // 为空显示异常，黄色
    
    switch (typeId) {
        case 1:
        case 3:
            return 'warning'  // 黄色
        case 2:
            return 'success'  // 绿色
        case 4:
            return 'danger'   // 红色
        default:
            return 'warning'  // 默认异常，黄色
    }
})

onMounted(() => {
    getUserType()
})

const goToInformation = () => {
    router.push('/user/information')
}

const goToHealth = () => {
    router.push('/user/health')
}
</script>

<style scoped>
.about-container {
    padding: 20px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    margin: 0;
    font-size: 16px;
    color: #303133;
}

.header-link {
    color: #909399;
    transition: all 0.3s;
}

.header-link:hover {
    color: #409EFF;
    transform: translateX(2px);
}

.card-content {
    padding: 20px;
}

/* 账号卡片样式 */
.user-profile {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.label {
    color: #909399;
    font-size: 14px;
}

.value {
    color: #303133;
    font-size: 14px;
}

.manage-btn {
    width: 100%;
    margin-top: 10px;
}

/* 健康卡片样式 */
.health-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.stat-label {
    color: #909399;
    font-size: 14px;
}

.stat-value {
    color: #303133;
    font-size: 18px;
    font-weight: 500;
}

.health-status {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.status-label {
    color: #909399;
    font-size: 14px;
}

.status-tag {
    font-size: 14px;
}

/* 空状态样式 */
.empty-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* 响应式布局 */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}
</style>
